<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .row {
            padding: 0 20px;
        }
        .stars-list {
            position: relative;
        }
        .star {
            position: relative;
            min-height: 120px;
            margin:10px 0;
            background: teal;
            display: flex;
            align-items: center;
            padding: 0 20px;
            border-radius: 5px;
        }
        .star >span.del {
            position: absolute;
            top:10px;
            right:10px;
            color: white;
            font-size: 14px;
            cursor: pointer;
        }
        .star-info {
            color: white;
            font-size: 24px;
        }
        .star-name {
            margin:0 20px;
        }
        .toggleAvatar {
            border:1px dotted #8c8c8c;
            width: 80px;
            height:80px;
            border-radius: 5px;
            font-size: 40px;
            color: grey;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .toggleAvatar:hover {
            cursor: pointer;
        }
    </style>
    <title>我喜欢的明星</title>
</head>
<body>
    <div class="row">
        <div class="col-md-7">
            <div class="jumbotron">
                <h1>Ajax POST</h1>
                <pre>
                    $(document).ready(function () {
                        $('.is-ajax-get').click(function () {
                            console.log('Ajax开始执行 方法GET')
                            $.ajax({
                                type: "POST",
                                url: "/api/star",
                                data: data,
                                success: function(res){
                                console.log('后端返回数据:', res);
                                    for (var t=0; t < res.data.length-1; t++) {
                                        $('.stars_list').append(
                                        '&lt;img src="'+ res.data[t].avatar +'" alt=""&gt;'
                                    )
                                }
                            }
                        })
                    })
                </pre>
                <h3>返回结果</h3>
                <pre id="post_result"></pre>
            </div>
        </div>
        <div class="col-md-5">
            <form class="ajax-post-form">
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" class="form-control" id="name" name="name" placeholder="姓名">
                </div>
                <div class="form-group">
                    <label for="hometown">家乡</label>
                    <input type="text" class="form-control" id="hometown" name="hometown" placeholder="家乡">
                </div>
                <div class="form-group">
                    <label for="avatar">头像</label>
                    <div class="toggleAvatar">
                        +
                    </div>
                    <p class="help-block">最大可上传2m (Ajax 异步文件上传)</p>
                </div>
                <button type="button" class="btn btn-primary is-ajax-post">Submit</button>
                <button type="reset" class="btn btn-warning form-reset">Reset</button>
            </form>
            <form class="cover_form" action="/stars/upload">
                {{csrf_field()}}
                <input type="file" style="display: none" id="selectCover" name="avatar">
            </form>
        </div>
    </div>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // ajax post
        $('.is-ajax-post').click(function () {
            console.log('Ajax开始执行 方法POST')
            var data = $('form.ajax-post-form').serialize()
            $.ajax({
                type: "POST",
                url: "/api/star",
                data: data,
                success: function(res){
                    console.log('后端返回数据:', res)
                    $('#post_result').text(JSON.stringify(res))
                    $('.form-reset').click()
                    $('.toggleAvatar').text('+')

                },
                error: function (res) {
                    console.log(res)
                }
            })
        })
        // ajax 异步上传文件
        $('.toggleAvatar').click(function () {
            $("#selectCover").click();
        })
        $('#selectCover').change(function () {
            if(!window.FormData) {
                alert('your brower is too old');
                return false;
            }
            var form = $('form.cover_form');
            var url = form.attr("action");
            var data = new FormData($( ".cover_form" )[0]);
            $.ajax({
                url:url,
                type:'POST',
                data:data,
                processData: false,
                contentType: false,
                dataType:'json',
                success:function(result){
                    if (result.status = 1) {
                        $('.toggleAvatar').html(`
                            <div class="">
                                <img src="${result.url}" class="img-responsive">
                                <input type="hidden" name="avatar" value=${result.url}>
                            </div>
                        `
                        );
                        console.log(result.info)
                    } else if (result.status = 0) {
                        console.log(result)
                    }
                },
            })
        });
    })
</script>
</body>
</html>
